<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

    </style>
</head>

<body>
    <button popoverTarget="poperId"> 打开</button>

    <div popover id="poperId">
        我是一个弹出框,默认居中展示，并且层级顶级不可被z-index覆盖
        <hr>
        popovertarget属性设置在按钮上，点击后，自动寻找设置了popover属性，同时 id 值匹配的元素。
        <hr>
        而设置了popover属性的元素默认隐藏，自带边框，遮罩背景透明，同时层级顶级（top layer）：
        <hr>
        顶级层级
        <hr>
        支持ESC等快捷键，使用非常方便，可谓是实现浮层弹出层的上上之选。
    </div>
</body>

</html>